<template>
  <div class="users-base-wrapper">
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px">
        <el-button type="primary" size="mini" @click="handleRefresh">刷新</el-button>
        <el-button type="primary" size="mini" @click="handleAdd" icon="el-icon-plus" v-if="isOperate">新增</el-button>
      </el-row>
      <el-table
        :data="automaticValueList"
        stripe
        style="width: 100%"
        size="mini"
        row-key="id"
        :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
        <template v-for="(column, index) in tableColumns">
          <el-table-column
            v-if="column.visible"
            :width="column.width"
            :key="index"
            :min-width="column.minWidth"
            :label="column.name"
            :show-overflow-tooltip="true"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="column.key === 'operation1'">
                <span>
                  <el-tag size="mini" v-if="scope.row.operation === '0'" type="success">生效</el-tag>
                  <el-tag size="mini" v-if="scope.row.operation === '1'" type="error">失效</el-tag>
                </span>
              </div>
              <div v-if="column.key === 'source1'">
                <span>{{ sourceType[scope.row.source] }}</span>
              </div>
              <div v-if="column.key === 'effectuate'">
                <span>{{ scope.row.effectuate === '0' ? '是' : '否' }}</span>
              </div>
              <!-- 取值函数 -->
              <div v-if="column.key === 'getterType'">
                {{ getterTypeListEnums[scope.row.getterType] }}
              </div>
              <span v-else>{{ scope.row[column.key] }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- 操作 -->
        <el-table-column type="operate" label="操作" align="center" width="110">
          <template slot-scope="scope">
            <div>
              <i class="el-icon-view table-icon" @click="handleView(scope.row)"></i>
              <i class="el-icon-document-copy table-icon" @click="handleEdit(scope.row)"></i>
              <i
                v-if="isOperate"
                class="el-icon-delete table-icon"
                style="color: red"
                @click="handleDelete(scope.row)"
              ></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <add-record
        :dialogVisible="dialogVisible"
        :dialogTitle="dialogTitle"
        :editData="editData"
        :searchParams="searchParams"
        @handleCancel="handleCancel"
        :allDisabled="allDisabled"
      ></add-record>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { tableColumns, getterTypeListEnums } from './data'
import addRecord from './component/add-record.vue'

export default {
  name: 'general-coding',
  components: {
    addRecord,
  },

  data() {
    return {
      getterTypeListEnums,
      dialogVisible: false,
      dialogTitle: '',
      editData: {},
      automaticValueList: [],
      tableColumns,
      searchParams: {},
      sourceType: {
        1: 'S',
        2: 'P',
        3: 'M',
      },
      projectId: '',
      databaseId: '',
      databaseVersion: '',
      databaseInfo: '',
      environment: '',
      allDisabled: false,
      isOperate: true,
    }
  },
  created() {
    this.projectId = localStorage.getItem('sys-project-id') || ''
    this.databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}
    this.databaseId = this.databaseInfo.databaseId || ''
    this.databaseVersion = this.databaseInfo.databaseVersion || ''
    this.environment = sessionStorage.getItem('environment') || '0'
  },
  mounted() {
    const databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}
    this.searchParams = {
      projectId: localStorage.getItem('sys-project-id') || '',
      ...databaseInfo,
      environment: this.environment,
    }
    this.getAutomaticValueList()

    if (databaseInfo.isLock === '1') {
      this.isOperate = false
    }
  },

  methods: {
    ...mapActions('eCRFDesign', ['getAutomatiValue', 'deleteAutomatiValue']),

    // 查询eCRF表单列表
    getAutomaticValueList() {
      const params = {
        ...this.searchParams,
      }
      this.getAutomatiValue({ params }).then(res => {
        const { data, code, message } = res
        if (code === 200) {
          this.automaticValueList = data || []
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 刷新操作
    handleRefresh() {
      this.getAutomaticValueList()
    },

    // 添加
    handleAdd() {
      this.dialogVisible = true
      this.editData = {}
      this.dialogTitle = '新建'
      this.allDisabled = false
    },

    // 关闭弹框
    handleCancel(type) {
      this.dialogVisible = false
      if (type === 'refresh') {
        // 是刷新列表
        this.getAutomaticValueList()
      }
    },

    // 删除
    handleDelete(row) {
      const params = {
        id: row.id,
      }
      this.$confirm('确定删除该条数据吗？', '删除提示', {
        type: 'warning',
      }).then(res => {
        this.deleteAutomatiValue({ params }).then(res => {
          if (res.code === 200) {
            this.$message({ message: '删除成功', type: 'success' })
            this.getAutomaticValueList()
          }
        })
      })
    },

    // 点击查看
    handleView(row) {
      this.dialogVisible = true
      this.editData = { ...row }
      this.dialogTitle = '查看'
      this.allDisabled = true
    },
    // 点击复制
    handleEdit(row) {
      this.dialogVisible = true
      this.editData = { ...row }
      this.dialogTitle = '复制'
      this.allDisabled = false
    },
  },
}
</script>
<style lang="scss" scoped>
.users-base-wrapper {
  display: flex;
  flex-direction: column;
  .search-bar {
    display: flex;
    align-items: center;
    height: 82px;
    padding-left: 25px;
    background-color: $white;
    .filter-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 240px;
      margin-right: 20px;
      .label {
        width: 80px;
      }
      input {
        width: 140px;
      }
    }
  }

  .details-layout {
    height: calc(100vh - 90px);
    padding: 15px 20px 0 20px;

    background-color: #fff;

    .page-container {
      width: 100%;
      margin-top: 16px;
      text-align: right;
    }
  }

  .table-icon {
    font-size: 16px;
    cursor: pointer;
    color: #753cca;
    margin-right: 12px;
  }
  .search-bar {
    // width: 100%;
    .el-form {
      width: 100%;
    }
  }
}
</style>
